<template>
    <view>
        <view class="uni-padding-wrap">
            <!-- 评论区 start -->
            <view class="uni-comment">
                <view class="uni-comment-list" v-for="(item,index) in list" :key="index">
                    <view class="uni-comment-face">
                        <uni-icons type="contact-filled" size="30"></uni-icons>
                    </view>
                    <view class="uni-comment-body">
                        <view class="uni-comment-top">
                            <text>用户：{{item.username}}</text>
                        </view>
                        <view class="uni-comment-date">
                            <text>留言时间：{{item.time}}</text>
                        </view>
                        <view class="uni-comment-content">留言内容：{{item.textarea}}</view>
                    </view>
                </view>
               <!-- <view class="uni-comment-list">
                    <view class="uni-comment-face">
                        <uni-icons type="contact-filled" size="30"></uni-icons>
                    </view>
                    <view class="uni-comment-body">
                        <view class="uni-comment-top">
                            <text>马克一天</text>
                        </view>
                        <view class="uni-comment-content">很强大，厉害了我的uni-app!</view>
                    </view>
                </view>
                <view class="uni-comment-list">
                    <view class="uni-comment-face">
                        <uni-icons type="contact-filled" size="30"></uni-icons>
                    </view>
                    <view class="uni-comment-body">
                        <view class="uni-comment-top">
                            <text>今生缘</text>
                        </view>
                        <view class="uni-comment-content">好牛逼的感觉，是不是小程序、App、移动端都互通了？</view>
                        <view class="uni-comment-date">
                            <text>08/10 07:55</text>
                        </view>
                    </view>
                </view>
                <view class="uni-comment-list">
                    <view class="uni-comment-face">
                        <uni-icons type="contact-filled" size="30"></uni-icons>
                    </view>
                    <view class="uni-comment-body">
                        <view class="uni-comment-top">
                            <text>小猫咪</text>
                        </view>
                        <view class="uni-comment-content">支持国产，支持DCloud!</view>
                        <view class="uni-comment-date">
                            <view>2天前</view>
                            <view class="uni-comment-replay-btn">5回复</view>
                        </view>
                    </view>
                </view> -->
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: "评论界面",
				list:[]
            }
        },
		onLoad: function (options) {//此处接收传递过来的参数wx.navigateTo跳转时传递的参数
		    // //如果要在页面中使用
		    // this.setData({
		    //    id: options.id
		    // })
			this.getList(options.good_id)
		},
		methods:{
			async getList(good_id){
				const res = await this.$myRequest({
					url: '/api/liuyan/selectAll',
					data: {good_id:good_id}
				})
				this.list = res
			}
		}
    }
</script>

<style>
    /* comment */
    page {
        background-color: #f8f8f8;
    }

    .uni-padding-wrap {
        padding: 30upx;
    }

    view {
        font-size: 28upx;
    }

    .uni-comment {
        padding: 5rpx 0;
        display: flex;
        flex-grow: 1;
        flex-direction: column;
    }

    .uni-comment-list {
        flex-wrap: nowrap;
        padding: 10rpx 0;
        margin: 10rpx 0;
        width: 100%;
        display: flex;
    }

    .uni-comment-face {
        width: 70upx;
        height: 70upx;
        border-radius: 100%;
        margin-right: 20upx;
        flex-shrink: 0;
        overflow: hidden;
    }

    .uni-comment-face image {
        width: 100%;
        border-radius: 100%;
    }

    .uni-comment-body {
        width: 100%;
    }

    .uni-comment-top {
        line-height: 1.5em;
        justify-content: space-between;
    }

    .uni-comment-top text {
        color: #0A98D5;
        font-size: 24upx;
    }

    .uni-comment-date {
        line-height: 38upx;
        flex-direction: row;
        justify-content: space-between;
        display: flex !important;
        flex-grow: 1;
    }

    .uni-comment-date view {
        color: #666666;
        font-size: 24upx;
        line-height: 38upx;
    }

    .uni-comment-content {
        line-height: 1.6em;
        font-size: 28upx;
        padding: 8rpx 0;
    }

    .uni-comment-replay-btn {
        background: #FFF;
        font-size: 24upx;
        line-height: 28upx;
        padding: 5rpx 20upx;
        border-radius: 30upx;
        color: #333 !important;
        margin: 0 10upx;
    }
</style>

